<template>
  <div>
    <table border="1">
      <tr>
        <th>欢迎光临_vue开发的收银系统_水果店</th>
      </tr>
      <tr>
        <th>苹果10￥/斤，折扣 ＜ 8折＞</th>
      </tr>
      <tr>
        <th>请输入您购买的斤数<input type="text" v-model.number.lazy="sum"></th>
      </tr>
      <tr>
        <th><button @click="btn">结账买单</button></th>
      </tr>
      <tr>
        <th>结账单：总价：{{sum*10}}￥元 折后价：{{bum||0}}￥元 省了{{sum*10-sum*8}}￥元</th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
data () {
  return {
    sum:'',
    bum:''
  }
},
methods:{
  btn(){
     this.bum=this.sum*8
  }
}
}
</script>

<style>
table{
  width: 800px;
  height: 200px;
}
</style>